<template>
    <div class="progressbar">
       <progress :percent="percent" activeColor='#ea5a49' />
       <p>{{ year }}已经过去了{{ days }}天，{{ percent }}%</p>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    computed: {
      // 年份
      year () {
        return new Date().getFullYear()
      },

      // 今年已过去多少天
      days () {
        // start今年第一天
        let start = new Date()
        start.setMonth(0)
        start.setDate(1)
        // 时间戳
        let offset = new Date().getTime() - start.getTime()
        return parseInt(offset / 1000 / 60 / 60 / 24) + 1
      },
      // 百分比
      percent () {
        return (this.days * 100 / this.getDayOfYear()).toFixed(1)
      }
    },
    methods: {
      // 判断是否为闰年
      isLeepYear () {
        const year = new Date().getFullYear()
        if (year % 400 === 0) {
          return true
        } else if (year % 4 === 0 && year % 100 !== 0) {
          return true
        } else {
          return false
        }
      },
      // 获取一年有多少天
      getDayOfYear () {
        return this.isLeepYear() ? 366 : 365
      }
    }
  }
</script>

<style scoped lang="scss">
.progressbar {
    width: 100%;
    text-align: center;
    margin: 10px 0 40px;
    progress {
        margin-bottom: 10px;
    }
}
</style>
